<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function checkReg() {
  const username = document.getElementById("username").value.trim();
  const email = document.getElementById("email").value.trim();
  const password = document.getElementById("password").value;

  let isValid = true;

  // 清除旧错误
  document.getElementById("usernameError").textContent = "";
  document.getElementById("emailError").textContent = "";
  document.getElementById("passwordError").textContent = "";

  if (username === "") {
    document.getElementById("usernameError").textContent = "用户名不能为空";
    isValid = false;
  }else if (username.length <6) {
    document.getElementById("usernameError").textContent = "用户名至少6个字符";
    isValid = false;
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    document.getElementById("emailError").textContent = "请输入有效的邮箱地址";
    isValid = false;
  }

  if (password.length < 6) {
    document.getElementById("passwordError").textContent = "密码至少需要6位";
    isValid = false;
  }

  if (isValid) {
    alert("注册成功！");
  }

  return isValid;
}
</script>

<body>
    <form id="registerForm" onsubmit="return checkReg()">
        <h3>用户注册</h3>
      
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <div class="error" id="usernameError"></div><br>
      
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <div class="error" id="emailError"></div><br>
      
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <div class="error" id="passwordError"></div><br>
      
        <button type="submit">注册</button>
        <button type="button" onclick="clearInfo()">重置</button>
      </form>
    
</body>
</html>